<template>
	<view class="container">
		<view style="flex: 1;">
			<view class="main">
				<view style="padding: 30rpx 34rpx 0;">
					<view class="step">
						<view class="title">
							<view>第2步</view>
							<view class="" style="padding-left: 24rpx;">
								输入实名信息
							</view>
						</view>
						<view class="num">
							2/3
						</view>
					</view>
				</view>
				<view class="phone">
					<view style="margin-bottom: 72rpx;">
						<view class="des">
							姓名：
						</view>
						<u-input placeholder="输入姓名" v-model="form.realname"></u-input>
					</view>
					<view style="margin-bottom: 72rpx;">
						<view class="des">
							身份证号：
						</view>
						<u-input placeholder="输入身份证号" v-model="form.idcard_no"></u-input>
					</view>
					<view style="margin-bottom: 72rpx;">
						<view class="des">
							身份证正面：
						</view>
						<view class="id_card" @click="choose(0)">
							<span v-if="!showimg.idcard_front_image">身份证正面</span>
							<image class="id_img" v-else :src="showimg.idcard_front_image" mode="widthFix"></image>
						</view>
					</view>
					<view style="margin-bottom: 72rpx;">
						<view class="des">
							身份证反面：
						</view>
						<view class="id_card" @click="choose(1)">
							<span v-if="!showimg.idcard_back_image">身份证反面</span>
							<image class="id_img" v-else :src="showimg.idcard_back_image" mode="widthFix"></image>
						</view>
					</view>
					<view class="submit" @click="submit">
						下一步
					</view>
				</view>
			</view>
		</view>
		<view class="copyright">
			Copyright © 2024-2025 中检集团 版权所有
		</view>
	</view>
</template>

<script>
	import {
		submit_info_api,
		upload_api
	} from '@/common/api.js'
	import {
		Base64
	} from "@/js_sdk/js-base64/base64.js"
	export default {
		data() {
			return {
				showimg: {
					idcard_front_image: '',
					idcard_back_image: ''
				},
				form: {
					realname: '',
					idcard_no: '',
					idcard_front_image: '',
					idcard_back_image: '',
					phone: '',
				}
			}
		},
		onLoad({
			phone
		}) {
			this.form.phone = Base64.decode(phone)
		},
		methods: {
			submit() {
				if (!this.form.realname) return this.$u.toast('请输入你的姓名')
				if (!this.form.idcard_no) return this.$u.toast('请输入你的身份证号')
				if (!uni.$u.test.idCard(this.form.idcard_no)) return this.$u.toast('请输入正确的身份证号码')
				if (!this.form.idcard_front_image) return this.$u.toast('请上传你的身份证正面照片')
				if (!this.form.idcard_back_image) return this.$u.toast('请上传你的身份证反面照片')
				uni.showLoading({
					mask: true,
				})
				submit_info_api(this.form).then(() => {
					uni.navigateTo({
						url: `/pages/index/third?phone=${Base64.encode(this.form.phone)}`
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			choose(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						upload_api({
							filePath: res.tempFilePaths[0]
						}).then(res => {
							if (!type) {
								this.form.idcard_front_image = res.data.url
								this.showimg.idcard_front_image = res.data.fullurl
							} else {
								this.form.idcard_back_image = res.data.url
								this.showimg.idcard_back_image = res.data.fullurl
							}
						}).finally(() => {
							uni.hideLoading()
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 52rpx 24rpx 0;

		.main {
			background-color: #fff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding-bottom: 26rpx;

			.step {
				border-bottom: 2rpx solid #E7E7E7;
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;


				.title {
					display: flex;
					font-size: 36rpx;
					font-weight: 500;
					color: #303133;
					line-height: 56rpx;
				}

				.num {
					font-size: 32rpx;
					font-weight: 500;
					color: #303133;
					line-height: 56rpx;
				}
			}

			.phone {

				margin: 50rpx 34rpx 0;

				.des {
					font-size: 28rpx;
					color: #606266;
					margin-bottom: 24rpx;
				}

				.id_card {
					height: 372rpx;
					background: #F3F4F6;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					opacity: 1;
					border: 2rpx solid #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;

					>span {
						font-weight: 500;
						font-size: 48rpx;
						color: #C0C4CC;
					}
				}


				.submit {
					width: 196rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #43B0E8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					margin: 0 auto;
					margin-top: 72rpx;
					margin-bottom: 74rpx;
				}
			}

			.note {
				margin: 0 34rpx;
				font-size: 28rpx;
				color: #909399;
				line-height: 50rpx;
			}

		}

		.copyright {
			margin-top: 154rpx;
			padding-bottom: 34rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.id_img {
			width: 100%;
			height: 100%;
		}
	}
</style>